CSS Mantiqiy Quti Modeli: Global Veb-saytlar uchun Yozuv Rejimini Hisobga Olgan Sahifa Xossalari

Veb - bu global platforma va dasturchilar sifatida biz hamma uchun, ularning tili yoki madaniy kelib chiqishidan qat'i nazar, foydalanish mumkin bo'lgan veb-saytlar yaratish mas'uliyatiga egamiz. Bunga erishishning asosiy jihatlaridan biri bu CSS Mantiqiy Quti Modeli va unga bog'liq yozuv rejimini hisobga oladigan sahifa xossalarini tushunish va ulardan foydalanishdir. Ushbu xossalar bizga turli yozuv rejimlariga (gorizontal, vertikal) va matn yo'nalishlariga (chapdan o'ngga, o'ngdan chapga) muammosiz moslashadigan sahifalar yaratishga imkon beradi, bu esa barcha foydalanuvchilar uchun izchil va qulay tajribani ta'minlaydi.

Jismoniy va Mantiqiy Quti Modelini Tushunish

An'anaviy ravishda, margin-top, margin-right, margin-bottom va margin-left kabi CSS xossalari ekranning jismoniy o'lchamlariga bog'liq. Bu jismoniy quti modeli deb nomlanadi. Chapdan o'ngga va yuqoridan pastga o'qiladigan tillar uchun bu tushunarli bo'lsa-da, boshqa yozuv rejimlari bilan ishlaganda muammolarni keltirib chiqaradi.

Boshqa tomondan, mantiqiy quti modeli yozuv rejimi va matn yo'nalishiga nisbiy bo'lgan xossalardan foydalanadi. top, right, bottom va left o'rniga, u block-start, inline-end, block-end va inline-start kabi xossalardan foydalanadi. Ushbu abstraksiya sahifaning yozuv rejimiga qarab avtomatik ravishda moslashishiga imkon beradi va murakkab shartli uslublarni yaratish zaruratini yo'qotadi.

Asosiy Tushunchalar: Yozuv Rejimlari va Matn Yo'nalishi

Xossalarga chuqurroq kirishdan oldin, yozuv rejimlari va matn yo'nalishining asosiy tushunchalarini tushunish muhimdir.

Yozuv Rejimlari

writing-mode CSS xossasi matn qatorlarining gorizontal yoki vertikal joylashishini belgilaydi. U quyidagi qiymatlarni qabul qilishi mumkin:

• horizontal-tb: Standart qiymat. Matn gorizontal ravishda, chapdan o'ngga (LTR tillarda) yoki o'ngdan chapga (RTL tillarda) va vertikal ravishda, yuqoridan pastga oqadi.
• vertical-rl: Matn vertikal ravishda, yuqoridan pastga va gorizontal ravishda, o'ngdan chapga oqadi. Bu an'anaviy Sharqiy Osiyo yozuvlarida keng qo'llaniladi.
• vertical-lr: Matn vertikal ravishda, yuqoridan pastga va gorizontal ravishda, chapdan o'ngga oqadi. Kamroq tarqalgan, ammo ba'zi Sharqiy Osiyo kontekstlarida hali ham qo'llaniladi.

Misol:

            .vertical-rl {
  writing-mode: vertical-rl;
}

            

              
                Copy
              
            
          

Matn Yo'nalishi

direction CSS xossasi ichki kontentning qaysi yo'nalishda oqishini belgilaydi. U asosan arab va ibroniy kabi o'ngdan chapga (RTL) o'qiladigan tillar uchun ishlatiladi.

• ltr: Chapdan o'ngga yo'nalish (standart).
• rtl: O'ngdan chapga yo'nalish.

Misol:

            .rtl {
  direction: rtl;
}

            

              
                Copy
              
            
          

Eslatma: direction xossasi ichki matn yo'nalishiga va mantiqiy quti modelidagi start va end kabi xossalarning talqiniga ta'sir qiladi.

Mantiqiy Xossalar va Qiymatlar

Quyidagi CSS xossalari mantiqiy quti modelining bir qismi bo'lib, yozuv rejimini hisobga oladi. Ular biz o'rganib qolgan jismoniy xossalarni almashtiradi va sahifani boshqarishning yanada moslashuvchan va xalqaro usulini taqdim etadi.

Margin Xossalari

• margin-block-start: horizontal-tb rejimida margin-top ga teng.
• margin-block-end: horizontal-tb rejimida margin-bottom ga teng.
• margin-inline-start: ltr rejimida margin-left ga va rtl rejimida margin-right ga teng.
• margin-inline-end: ltr rejimida margin-right ga va rtl rejimida margin-left ga teng.

Misol:

            .box {
  margin-block-start: 20px; /* Top margin in horizontal mode */
  margin-block-end: 30px;   /* Bottom margin in horizontal mode */
  margin-inline-start: 10px;  /* Left margin in LTR, Right in RTL */
  margin-inline-end: 15px;   /* Right margin in LTR, Left in RTL */
}

            

              
                Copy
              
            
          

Padding Xossalari

Marginlarga o'xshab, padding ham mantiqiy hamkasblarga ega:

• padding-block-start: horizontal-tb rejimida padding-top ga teng.
• padding-block-end: horizontal-tb rejimida padding-bottom ga teng.
• padding-inline-start: ltr rejimida padding-left ga va rtl rejimida padding-right ga teng.
• padding-inline-end: ltr rejimida padding-right ga va rtl rejimida padding-left ga teng.

Misol:

            .box {
  padding-block-start: 10px;
  padding-block-end: 10px;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

            

              
                Copy
              
            
          

Border Xossalari

Mantiqiy border xossalari ham xuddi shu qolipga amal qiladi:

• border-block-start, border-block-start-width, border-block-start-style, border-block-start-color
• border-block-end, border-block-end-width, border-block-end-style, border-block-end-color
• border-inline-start, border-inline-start-width, border-inline-start-style, border-inline-start-color
• border-inline-end, border-inline-end-width, border-inline-end-style, border-inline-end-color

Qisqartirilgan xossalar ham mavjud:

• border-block: border-block-start va border-block-end uchun qisqartma.
• border-inline: border-inline-start va border-inline-end uchun qisqartma.

Misol:

            .box {
  border-block-start: 2px solid black;
  border-inline-end: 1px dashed gray;
}

            

              
                Copy
              
            
          

Joylashuv Xossalari

Joylashuv uchun top, right, bottom va left o'rniga quyidagilardan foydalaning:

• inset-block-start: horizontal-tb rejimida yuqori chetdan masofa.
• inset-block-end: horizontal-tb rejimida pastki chetdan masofa.
• inset-inline-start: ltr rejimida chap chetdan yoki rtl rejimida o'ng chetdan masofa.
• inset-inline-end: ltr rejimida o'ng chetdan yoki rtl rejimida chap chetdan masofa.

Qisqartirilgan xossa:

• inset: Barcha to'rtta inset xossasi uchun qisqartma, top, right, bottom, left tartibiga (ammo mantiqiy) rioya qiladi.

Misol:

            .box {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 20px;
}

            

              
                Copy
              
            
          

O'lcham Xossalari

Kenglik va balandlikni belgilash uchun quyidagilardan foydalaning:

• block-size: Yozuv rejimiga qarab elementning balandligi yoki kengligini ifodalaydi. Gorizontal yozuv rejimlarida u vertikal o'lchamga (balandlik); vertikal yozuv rejimlarida esa gorizontal o'lchamga (kenglik) mos keladi.
• inline-size: Yozuv rejimiga qarab elementning kengligi yoki balandligini ifodalaydi. Gorizontal yozuv rejimlarida u gorizontal o'lchamga (kenglik); vertikal yozuv rejimlarida esa vertikal o'lchamga (balandlik) mos keladi.
• min-block-size: Minimal blok o'lchami.
• max-block-size: Maksimal blok o'lchami.
• min-inline-size: Minimal ichki o'lcham.
• max-inline-size: Maksimal ichki o'lcham.

Misol:

            .box {
  block-size: 200px;  /* Height in horizontal mode, Width in vertical mode */
  inline-size: 300px; /* Width in horizontal mode, Height in vertical mode */
}

            

              
                Copy
              
            
          

Amaliy Misollar va Qo'llash Holatlari

Keling, mantiqiy quti modelidan foydalanib, yanada moslashuvchan va xalqaro sahifalar yaratishning ba'zi amaliy misollarini ko'rib chiqaylik.

1-misol: Navigatsiya Menyu Yaratish

Gorizontal navigatsiya menyusini ko'rib chiqing. Jismoniy quti modelidan foydalanib, birinchi elementga chap margin va oxirgi elementga o'ng margin o'rnatishingiz mumkin. Biroq, RTL tilida marginlar teskari bo'ladi. Mantiqiy xossalardan foydalanib, marginlar har doim to'g'ri qo'llanilishini ta'minlashingiz mumkin.

            .nav-item:first-child {
  margin-inline-start: 0; /* No margin on the start in either LTR or RTL */
}

.nav-item:last-child {
  margin-inline-end: 0;   /* No margin on the end in either LTR or RTL */
}

            

              
                Copy
              
            
          

2-misol: Yon Panelni Uslublash

LTR tillarida chapda va RTL tillarida o'ngda paydo bo'lishi kerak bo'lgan yon panelni tasavvur qiling. Har bir yo'nalish uchun alohida CSS qoidalarini ishlatish o'rniga, yon panelni to'g'ri joylashtirish uchun mantiqiy xossalardan foydalanishingiz mumkin.

            .sidebar {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0; /* Positions the sidebar on the left in LTR and right in RTL */
  block-size: 100%;
  inline-size: 200px;
}

.content {
  margin-inline-start: 200px; /* Pushes the content to the right in LTR and left in RTL */
}

            

              
                Copy
              
            
          

3-misol: Vertikal Matn bilan Ishlash

Vertikal matndan foydalanadigan tillar (masalan, yapon, xitoy) bilan ishlaganda mantiqiy quti modeli yanada muhimroq bo'ladi. Vertikal yozuv rejimiga o'tish uchun writing-mode xossasidan foydalanishingiz mumkin va mantiqiy xossalar sahifani avtomatik ravishda moslashtiradi.

            .vertical-text {
  writing-mode: vertical-rl;
  margin-block-start: 20px; /* Top margin in vertical mode */
  margin-inline-start: 10px; /* Left margin in vertical mode */
}

            

              
                Copy
              
            
          

Mantiqiy Quti Modelidan Foydalanishning Afzalliklari

Mantiqiy quti modelini qabul qilish bir nechta muhim afzalliklarni taqdim etadi:

• Xalqarolashtirishni Yaxshilash: Alohida CSS qoidalarini talab qilmasdan bir nechta tillar va yozuv rejimlarini qo'llab-quvvatlaydi. Bu global auditoriyaga xizmat ko'rsatadigan veb-saytlar yaratish uchun juda muhim.
• Moslashuvchanlikni Oshirish: Yozuv rejimi va matn yo'nalishidagi o'zgarishlarga avtomatik ravishda javob beradigan yanada moslashuvchan va egiluvchan sahifalar yaratadi.
• Dasturlashni Soddalashtirish: CSS kodining murakkabligini kamaytiradi va uni saqlashni osonlashtiradi. LTR va RTL sahifalari uchun shartli uslublar yozishdan qochasiz.
• Foydalanish Imkoniyatini Oshirish: Barcha tillardagi foydalanuvchilar uchun tabiiy va tushunarli tarzda kontentni taqdim etish orqali yanada qulay veb-sayt yaratishga hissa qo'shadi.
• Kelajakka Tayyorlash: Zamonaviy veb-ishlab chiqish amaliyotlariga mos keladi va veb-saytlaringizni kelajakdagi yozuv rejimlari va matn yo'nalishlaridagi o'zgarishlarga tayyorlaydi.

Brauzerlarga Mosligi va Muqobil Yechimlar

Ko'pgina zamonaviy brauzerlar CSS Mantiqiy Xossalari va Qiymatlari spetsifikatsiyasini qo'llab-quvvatlaydi. Biroq, eski brauzerlar uchun an'anaviy jismoniy xossalardan foydalanib muqobil yechimlar taqdim etishingiz kerak bo'lishi mumkin.

Keng tarqalgan usullardan biri - avval jismoniy xossalarni, so'ngra mantiqiy xossalarni ishlatish. Mantiqiy xossalarni qo'llab-quvvatlaydigan brauzerlar jismoniy xossalarni bekor qiladi, eski brauzerlar esa shunchaki jismoniy xossalardan foydalanadi.

            .box {
  margin-left: 10px;  /* Fallback for older browsers */
  margin-right: 20px; /* Fallback for older browsers */
  margin-inline-start: 10px;
  margin-inline-end: 20px;
}

            

              
                Copy
              
            
          

Mantiqiy xossalarni qo'llab-quvvatlaydigan brauzerlar uchun maxsus uslublar taqdim etish uchun xususiyat so'rovlaridan (@supports) ham foydalanishingiz mumkin.

            @supports (margin-inline-start: 0) {
  .box {
    margin-left: auto;  /* Remove fallback */
    margin-right: auto; /* Remove fallback */
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

            

              
                Copy
              
            
          

Eng Yaxshi Amaliyotlar va Maslahatlar

• Mantiqiy Model bilan Boshlang: Yangi loyihalar yaratayotganda, boshidanoq mantiqiy quti modelidan foydalanishni o'ylab ko'ring. Bu uzoq muddatda vaqtingizni va kuchingizni tejaydi.
• Mavjud Loyihalarni Asta-sekin O'tkazing: Agar mavjud loyihalaringiz bo'lsa, ularni asta-sekin mantiqiy quti modeliga o'tkazishingiz mumkin. Eng muhim komponentlardan boshlang va kod bazasining qolgan qismi bo'ylab ishlang.
• CSS Preprotsessoridan Foydalaning: Sass yoki Less kabi CSS preprotsessorlari CSS kodining murakkabligini boshqarishga yordam beradi va mantiqiy quti modelidan foydalanishni osonlashtiradi. Kerakli jismoniy xossa muqobillarini yaratish uchun miksinlar yoki funksiyalar yaratishingiz mumkin.
• Puxta Sinovdan O'tkazing: Sahifaning to'g'ri moslashishini ta'minlash uchun veb-saytlaringizni turli yozuv rejimlari va matn yo'nalishlarida sinab ko'ring. CSS-ni tekshirish va mantiqiy xossalarning kutilganidek qo'llanilayotganini tasdiqlash uchun brauzer dasturchi vositalaridan foydalaning.
• Hujjatlarga Murojaat Qiling: Mantiqiy quti modeli va uning xossalari haqida eng so'nggi ma'lumotlar uchun rasmiy CSS spetsifikatsiyalari va brauzer hujjatlariga murojaat qiling.

Xulosa

CSS Mantiqiy Quti Modeli va yozuv rejimini hisobga oladigan sahifa xossalari haqiqatan ham global va foydalanish mumkin bo'lgan veb-saytlar yaratish uchun muhim vositalardir. Ushbu xossalarni tushunib, ulardan foydalangan holda, siz turli tillarga, yozuv rejimlariga va matn yo'nalishlariga muammosiz moslashadigan sahifalar yaratishingiz mumkin, bu esa barcha foydalanuvchilar uchun izchil va qulay tajribani ta'minlaydi. Mantiqiy quti modelini qabul qiling va hamma uchun yanada inklyuziv va foydalanish mumkin bo'lgan veb yarating.

Jismoniy quti modelidan voz kechib, mantiqiy modelni qabul qilish orqali siz haqiqatan ham inklyuziv va global auditoriya uchun foydalanish mumkin bo'lgan veb-tajribalar yaratish yo'lida muhim qadam tashlaysiz. Bu nafaqat foydalanuvchilaringizga foyda keltiradi, balki loyihalaringizni kelajakka tayyorlaydi va ularning tobora xilma-xil raqamli landshaftda dolzarb va moslashuvchan bo'lib qolishini ta'minlaydi.

Qo'shimcha O'qish va Manbalar

• MDN Veb Hujjatlari: CSS Mantiqiy Xossalari va Qiymatlari
• W3C CSS Mantiqiy Xossalari va Qiymatlari 1-daraja
• Ahmad Shadid tomonidan CSS Mantiqiy Xossalari